<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="res/style.css">

{#    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4736033_ux3qpx9j9w.css">#}
<title>DataGear 看板模板</title>
<!-- 模板样例CSS，导入后可删除 -->
<style type="text/css">

body::after{
	{#content: "DataGear（http://datagear.tech）";#}
	position: absolute;
	left: 0.1rem;
	top: 0.1rem;
}
.layout-center .panel{
	border: 1px dashed #2684ff;
}
.chart::after{
	content: "图表";
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -1rem;
	margin-left: -1rem;
	opacity: 0.8;
}
.btn-primary{
    position: absolute;
    right: 2%;
    top: 39%;
    color: #fff;
    background-color: #2975d7;
    border-color: #405fba;
    height: 30px;
    width: 60px;
    border-radius: 10px;
}
</style>
</head>
<body class="fill-parent"
	dg-chart-options="{title:{show:false},legend:{top:0},grid:{top:25}}"
	dg-chart-auto-resize="true"
	dg-chart-theme="{color:'#2684ff',backgroundColor:'transparent',actualBackgroundColor:'#142233'}">
<div class="head">
	<div class="title">大屏 </div>
                <a href="#" style="text-decoration: none;color: #fff"><button type="button" class="btn btn-primary">系统</button></a>


</div>
<div class="content">
	<div class="layout layout-left-top">
		<div class="panel panel-bg no-title-bg">
			<div class="title"></div>

             <div id="mainA" style="width: 100%;height: 80%"></div>
		</div>
	</div>
	<div class="layout layout-left-center">
		<div class="panel">
			<div class="title">标题</div>
			<div id="mainX" style="width: 100%;height: 450PX">

            </div>
		</div>
	</div>

	<div class="layout layout-center">
		<div class="layout layout-center-main">
			<div class="layout layout-center-top">
				<div class="  no-title-bg" style="display: flex;width: 100%;height: 100%">

                    <div style="flex: 1;border: 1px solid #2975d7;margin: 20px 10px 20px 0; text-align: center;">


                          <span style="color:#405fba;font-size: 20px;display: block;margin-top: 39px"> <i class="icon-dianyingpiaoiocn iconfont" style="font-size: 30px"></i></span>
                    <p style="color:#6685c3;"></p>
                    </div>
                        <div style="flex: 1;border: 1px solid #2975d7;margin: 20px 10px 20px 0; text-align: center;">
                          <span style="color:#405fba;font-size: 20px;display: block;margin-top: 39px"> <i class="icon-cash iconfont" style="font-size: 30px"></i></span>
                        </div>
                        <div style="flex: 1;border: 1px solid #2975d7;margin: 20px 10px 20px 0; text-align: center;">
                          <span style="color:#405fba;font-size: 20px;display: block;margin-top: 39px"> <i class="icon-leixing iconfont" style="font-size: 30px"></i></span>
                        </div>
				</div>
			</div>
			<div class="layout layout-center-bottom">
				<div class="panel no-title-bg">
					<div class="title">标题4</div>

                     <div id="mainB" style="width: 100%;height: 100%"></div>
				</div>
			</div>
		</div>
	</div>
	<div class="layout layout-right-top">
		<div class="panel">
			<div class="title">标题5</div>
			 <div id="mainC" style="width: 100%;height: 100%"></div>
		</div>
	</div>
	<div class="layout layout-right-center">
		<div class="panel">
			<div class="title">标题6</div>
		 <div id="mainD" style="width: 100%;height: 100%"></div>
		</div>
	</div>
	<div class="layout layout-right-bottom">
		<div class="panel">
			<div class="title">标题7</div>
			 <div id="mainE" style="width: 100%;height: 100%"></div>
		</div>
	</div>
</div>


<style>
    .row_list {
        list-style: none;
    }

    .cases_list::-webkit-scrollbar {
        display: none;
    }

    .cases_list li {
        display: grid;
        -ms-grid-columns: 15% 30% 20% 10% 25%;
        grid-template-columns: 15% 30% 20% 10% 25%;
        cursor: pointer;
        {#margin-left: 3px;#}
        font-size: 13px;
        text-align: center;
        line-height: 30px;
        color: rgb(238, 236, 236);
    }
</style>

</body>
</html>